<script setup lang="ts">
import { Plus } from "@element-plus/icons-vue";
import Explains from "./tabletitle.vue";
import Dialog from "./dialog.vue";
import { ref, reactive, defineEmits } from "vue";
import { tableList } from "../secondStep/data";
const dialogRef = ref();
const explainArr1 = reactive(tableList);
const deletes = index => {
  explainArr1.splice(index, 1);
};
const columns = [
  {
    label: "活动名称",
    prop: "name",
    align: "center"
  },
  {
    label: "活动内容",
    prop: "connect",
    align: "center"
  },
  {
    label: "负责人",
    prop: "person",
    align: "center"
  },
  {
    label: "开展时间",
    prop: "time",
    align: "center",
    slot: "time"
  },
  {
    label: "收益人群",
    prop: "people",
    align: "center"
  },
  {
    label: "操作",
    slot: "action",
    width: "180"
  }
];
const conIndex = ref("");
const conClick = index => {
  conIndex.value = index;
  dialogRef.value.init();
};
const addTableClick = form => {
  let index = conIndex.value;
  let tableData = explainArr1[index]["tableData"] || [];
  if (form.show) {
    let indexs = tableData.findIndex(item => item.id === form.id);
    tableData[indexs] = Object.assign({}, form, { show: true });
  } else {
    tableData.push(Object.assign({}, form, { show: true }));
  }
  explainArr1[index]["tableData"] = tableData;
};
const editClick = (indexs, row) => {
  conIndex.value = indexs;
  dialogRef.value.init(row);
};
const deletesClick = (indexs, index) => {
  let tableData = explainArr1[indexs]?.["tableData"] || [];
  tableData.splice(index, 1);
  explainArr1[indexs]["tableData"] = tableData;
};
import { useRouter } from "vue-router";
const router = useRouter();
let $emit = defineEmits(["submitClick"]);
</script>

<template>
  <div
    class="text-[20px] font-bold mt-[20px] mb-[20px] w-full flex justify-between pr-[10px] pt-[30px]"
  >
    项目产出清单
    <el-text class="mx-1" size="small"
      >社区邻里国际共融服务项目（上城区、滨江区、钱塘区）</el-text
    >

    <el-button
      type="primary"
      class="float-right"
      plain
      :icon="Plus"
      size="small"
      @click="
        () => {
          explainArr1.push({
            title: '',
            num: '',
            contont: '',
            show: true,
            id: Date.now()
          });
        }
      "
      >新增</el-button
    >
  </div>
  <template v-for="(item, indexs) in explainArr1" :key="item.id">
    <Explains
      :title="item.title"
      :contont="item.contont"
      :num="item.num"
      :show="item.show"
      @deletes="deletes(indexs)"
    >
      <template #btn>
        <el-button type="primary" link @click="conClick(indexs)"
          >新增子项</el-button
        >
      </template>
      <div class="ml-[20px] text-[14px] mt-[20px] font-bold">项目实施方案</div>
      <pure-table
        class="mt-[20px]"
        :data="item.tableData"
        :columns="columns"
        stripe
        border
        :header-cell-style="{
          textAlign: 'center',
          background: '#f5f7fa'
        }"
      >
        <template #time="{ row }">
          {{ row.time.join("至") }}
        </template>
        <template #sort="{ row }">
          {{ row.sort == 1 ? "社区服务类" : "为老服务类" }}
        </template>
        <template #status="{ row }">
          <el-tag type="success" v-if="row.status == 1">完成</el-tag>
          <el-tag type="primary" v-else-if="row.status == 2">进行中</el-tag>
          <el-tag type="info" v-else>未开始</el-tag>
        </template>
        <template #action="{ row, index }">
          <el-button type="primary" link @click="editClick(indexs, row)"
            >编辑</el-button
          >
          <el-button type="primary" link @click="deletesClick(indexs, index)"
            >删除</el-button
          >
        </template>
      </pure-table>
    </Explains>
  </template>
  <Dialog @submit="addTableClick" ref="dialogRef" />

  <div class="h-[40px]"></div>
  <div
    class="flex justify-center m-[10px] w-full p-[20px] bg-white shadow shadow-zinc-200 -left-[10px] relative"
  >
    <el-button @click="router.push({ name: 'projectApplication' })"
      >取消</el-button
    >
    <el-button @click="router.push({ name: 'projectApplication' })"
      >保存草稿</el-button
    >
    <el-button type="primary" @click="$emit('submitClick', 2)"
      >上一步</el-button
    >
    <el-button type="primary" @click="$emit('submitClick', 4)"
      >下一步</el-button
    >
  </div>
</template>

<style lang="scss" scoped></style>
